<template>
  <div class="mySwiper">
    <swiper
      class="swiper"
      :options="swiperOption"
    >
      <swiper-slide
        v-for="(item,index) in urlList"
        :key="index"
      >
        <!-- :style="{border: bor==1?'1px solid #ccc':'0',padding:bor==1?'7px':'0'}" -->
        <div
          class="sw_item pointer"
          @click="handNavTo(item)"
        >
          <img
            :class="[{ 'sw_item_img_wh': wh }, 'sw_item_img']"
            :style="{height:heig,width:wid}"
            :src="item.img"
            alt=""
          >
        </div>
      </swiper-slide>

    </swiper>
    <img
      class="my_swiper-button-prev"
      slot="button-prev"
      :style="{left:lef}"
      src="../assets/imges/arrow1.png"
      alt=""
    >

    <img
      :style="{right:rig}"
      class="my_swiper-button-next my_next"
      slot="button-next"
      src="../assets/imges/arrow.png"
      alt=""
    >
    <div
      v-if="pag"
      class="swiper-pagination sw_foot"
      slot="pagination"
    ></div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "mySwiper.vue",
  props: {
    heig: {
      type: String
    },
    wid: {
      type: String
    },
    wh: {
      type: Boolean,
      default: false
    },
    lef: {
      type: String
    },
    rig: {
      type: String
    },
    num: {
      type: Number,
      default: 3
    },
    pag: {
      type: Boolean,
      default: false
    },
    urlList: {
      type: Array
    },
    bor: {
      type: Number
    },
    ifClick: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: this.num,
        spaceBetween: 12,
        prevButton: ".my_swiper-button-prev",
        nextButton: ".my_swiper-button-next",
        pagination: ".swiper-pagination"
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true
        // }
        // navigation: {
        //   nextEl: ".my_swiper-button-prev",
        //   prevEl: ".my_swiper-button-next"
        // }
      }
    };
  },
  mounted() {},
  methods: {
    handNavTo(item) {
      if (this.ifClick) {
        console.log(item);
        this.$router.push({
          name: "news",
          query: {
            sortId: item.sortId,
            id: 2,
            title: item.aName,
            detailsID: item.id,
            avt: 0
          }
        });
      }
      // sortId: "17", id: 2, title: "路线动态"
    }
  }
};
</script>

<style lang='scss' scoped>
.sw_foot ::v-deep .swiper-pagination-bullet {
  margin-right: 15px;
  background: rgba(148, 148, 148, 1);
}
.sw_foot ::v-deep .swiper-pagination-bullet-active {
  background-color: #ffffff;
}
.sw_foot {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mySwiper {
  width: 100%;
  height: 100%;
  padding: 31px 24px;
  .sw_item {
    // width: 374px;
    // height: 270px;

    .sw_item_img {
      width: 100%;
      height: 100%;
    }
    .sw_item_img_wh {
      width: 845px;
      height: 313px;
    }
  }
}
.my_swiper-button-prev {
  width: 39.55px;
  height: 60px;
  position: absolute;
  top: 0;
  z-index: 999;
  top: 50%;
  margin-top: -30px;
  left: 9px;
}
.my_next {
  width: 39.55px;
  height: 60px;
  position: absolute;
  top: 0;
  z-index: 999;
  top: 50%;
  margin-top: -30px;
  right: 12px;
}
// .swiper-slide.swiper-slide-next {
//   width: auto !important;
// }
</style>
